window.addEventListener("load", function() {
    var ul = document.querySelector(".banner-sc")
    var imgwidth = ul.children[0].offsetWidth //li的宽度 
    var prev = document.querySelector(".prev")
    var next = document.querySelector(".next")
    var dot = document.querySelector(".dot")
    for (var i = 0; i < ul.children.length; i++) {
        var ci = document.createElement("i")
        ci.setAttribute("index", i)
        dot.appendChild(ci)
            //生成小圆圈的同时绑定事件
        ci.addEventListener("click", function() {
            for (var i = 0; i < dot.children.length; i++) {
                dot.children[i].className = ""
            }
            this.className = "active"
            var index = this.getAttribute("index")
            num = index;
            circle = index;
            animation(ul, index * -imgwidth, function() {
                flag = true
            })
        })
    }
    dot.children[0].className = "active"
    var first = ul.children[0].cloneNode(true)
    ul.appendChild(first)
        //点击切换下一张
    var num = 0;
    var circle = 0;
    var flag = true;
    next.addEventListener("click", function() {
        if (flag) {
            flag = false; //关闭节流阀
            if (num == ul.children.length - 1) {
                ul.style.left = 0
                num = 0
            }
            num++; //1 2 3
            animation(ul, -num * imgwidth, function() {
                    flag = true; //在回调中打开节流阀
                }) // 2  3  4
            console.log(num)

            circle++;
            if (circle == dot.children.length) {
                circle = 0
            }
            circlechange()
        }
    })

    prev.addEventListener("click", function() {
            if (flag) {
                flag = false
                if (num == 0) {
                    num = ul.children.length - 1
                    ul.style.left = -num * imgwidth + "px" //别忘px符号

                }
                num--; //1 2 3
                animation(ul, -num * imgwidth, function() {
                        flag = true;
                    }) // 2  3  4
                console.log(num)

                circle--;
                if (circle < 0) {
                    circle = dot.children.length - 1
                }
                circlechange()
            }
        })
        // 小圆圈先清除后设置
    function circlechange() {
        for (var i = 0; i < dot.children.length; i++) {
            dot.children[i].className = ""
        }
        dot.children[circle].className = "active"
    }

    var timer = setInterval(function() {
        next.click();
    }, 2000)
    ul.addEventListener("mouseover", function() {
        clearInterval(timer);
        timer = null;
    })
    ul.addEventListener("mouseout", function() {
        clearInterval(timer);
        timer = null;
        timer = setInterval(function() {
            next.click(); //自动点击yyds
        }, 2000)
    })
})